<template>
	<view class="daili-detail-container">
		
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-title">{{$t('dailiDetail.drama')}}</view>
			<view class="header-right"></view>
		</view>

		<!-- 封面图片区域 -->
		<view class="cover-section">
			<view class="cover-image-section">
				<image class="cover-image" :src="videoData.img" mode="aspectFill"></image>
				<view class="download-cover-btn" @click="downloadCoverImage">
					<text class="download-text">{{$t('dailiDetail.downloadCover')}}</text>
				</view>
			</view>
			
			<view class="content-info">
				<view class="main-title">{{videoData.name || '加载中...'}}</view>
				<view class="commission-ratio">{{$t('dailiDetail.commissionRatio')}}: <span class="highlight">{{videoData.ratio || 15}}%</span></view>
				
				<view class="tags">
					<view class="tag" v-for="(tag, index) in agentInfo.tags" :key="index">{{tag}}</view>
				</view>
			</view>
		</view>

		<!-- 内容信息区域 -->
		
		<!-- 导航标签 -->
		<view class="nav-tabs">
			<view 
				class="nav-tab" 
				:class="{ active: activeTab === 0 }"
				@click="switchTab(0)"
			>
				{{$t('dailiDetail.contentIntroduction')}}
			</view>
			<!-- 只有代理用户才能看到推广变现标签 -->
			<view 
				v-if="userInfo.is_crowd == 2"
				class="nav-tab" 
				:class="{ active: activeTab === 1 }"
				@click="switchTab(1)"
			>
				{{$t('dailiDetail.promotionMonetization')}}
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 内容简介 -->
			<view v-if="activeTab === 0" class="synopsis-section">
				<view class="section-title">{{$t('dailiDetail.dramaSynopsis')}}</view>
				<view class="synopsis-text" v-html="videoData.info">
					
				</view>
				
				
			</view>

			<!-- 推广变现 - 只有代理用户才能看到 -->
			<view v-if="activeTab === 1 && userInfo.is_crowd == 2" class="promotion-section">

				<!-- 链接信息显示区域 -->
				<view class="link-info-section">
					<view class="section-title">{{$t('dailiDetail.linkInformation')}}</view>
					
					<!-- 网盘链接 -->
					<view class="link-item">
						<view class="link-label">{{$t('dailiDetail.netdiskLink')}}:</view>
						<view class="link-content">
							<text class="link-text">{{videoData.box_link || $t('dailiDetail.noLink')}}</text>
						</view>
						<view class="link-actions">
							<view class="link-action-btn" @click="copyLink">{{$t('dailiDetail.copy')}}</view>
							
						</view>
					</view>
					
					<!-- 推广链接 -->
					<view class="link-item">
						<view class="link-label">{{$t('dailiDetail.promotionLink')}}:</view>
						<view class="link-content">
							<text class="link-text">{{videoData.link || videoData.share_url || `https://admin.rabbit-show.com/h5/#/pages/client/tuan/detail?vid=${vid}&fxpid=0&mid=0`}}</text>
						</view>
						<view class="link-actions">
							<view class="link-action-btn" @click="copyPromotionLink">{{$t('dailiDetail.copy')}}</view>
							<view class="link-action-btn" @click="openDirectly">{{$t('dailiDetail.open')}}</view>
						</view>
					</view>
				</view>

				
			

				<view class="promotion-tips">
					<view class="tip-title">{{$t('dailiDetail.promotionTips')}}</view>
					<view class="tip-item">{{$t('dailiDetail.tip1')}}</view>
					<view class="tip-item">{{$t('dailiDetail.tip2')}}</view>
					<view class="tip-item">{{$t('dailiDetail.tip3')}}</view>
				</view>
			</view>

			<!-- 非代理用户提示 -->
			<view v-if="activeTab === 1 && userInfo.is_crowd != 2" class="non-agent-tip">
				<view class="tip-title">{{$t('dailiDetail.agentOnly')}}</view>
				<view class="tip-content">{{$t('dailiDetail.contactCustomer')}}</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<!-- 只有代理用户才能看到推广按钮 -->
			<view v-if="userInfo.is_crowd == 2" class="action-btn promote-btn" @click="startPromotion">{{$t('dailiDetail.startPromotion')}}</view>
			
			<!-- 非代理用户提示 -->
			<view v-else class="action-btn non-agent-btn" @click="contactCustomer">{{$t('dailiDetail.contactCustomer')}}</view>
		</view>
	</view>
</template>

<script>
	import { languageMixin, pageTitleMixin } from '@/common/mixins.js';
	
	export default {
		mixins: [languageMixin, pageTitleMixin],
		data() {
			console.log('Daili detail page data initialized');
			return {
				currentTime: new Date().toLocaleString(),
				activeTab: 0,
				vid: '', // 视频ID
				mid: '', // 视频中间ID
				uid: 0, // 用户ID
				urls: '', // API基础URL
				videoData: {}, // 视频详情数据
				userInfo: {}, // 用户信息
				agentInfo: {
					cover: '/static/logo.png',
					character1: '/static/logo.png',
					character2: '/static/logo.png',
					character3: '/static/logo.png',
					character4: '/static/logo.png',
					title: 'เทพบุตรบัญชีแค้น',
					platform: 'FlexTV',
					commissionRatio: 30,
					highestRevenue: 879.25,
					tags: ['โรแมนติก', 'แก้แค้น', 'ละครเมือง', 'มหาเศรษฐี'],
					synopsis: 'มีเทพบุตรที่มีอิทธิพลมากที่สุดในเมือง แต่ซ่อนตัวเป็นลูกเขยเพื่อแก้แค้นอย่างลึกซึ้ง เขาได้ทนทุกข์ทรมานจากการดูถูกของครอบครัวภรรยาที่ไม่รู้จักตัวตนที่แท้จริงของเขา เมื่อตัวตนที่แท้จริงถูกเปิดเผย ทำให้เกิดความวุ่นวายทั่วเมือง และมหาเศรษฐีกลับมา พร้อมที่จะแก้แค้นอย่างพันเท่า'
				},
				promotionData: {
					totalViews: 12580,
					totalClicks: 3420,
					totalEarnings: 879.25
				}
			}
		},
		onLoad(options) {
			console.log('Daili detail page loaded with options:', options);
			
			// 获取API基础URL
			this.urls = this.configs.webUrl;
			
			// 获取视频ID参数
			if(options.id){
				this.vid = options.id;
			}
			if(options.mid){
				this.mid = options.mid;
			}
			
			// 先获取用户信息，然后获取视频详情
			this.getUserInfo();
		},
		onShow() {
			// 每次显示页面时获取最新用户信息
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息 - 与 daili.vue 页面保持一致
			async getUserInfo() {
				try {
					let data = {};
					data.token = uni.getStorageSync("userinfo").token;
					data.uid = uni.getStorageSync("userinfo").id;
					
					uni.request({
						url: this.urls + '/api/user/index',
						data: data,
						success: res => {
							console.log('用户信息API响应:', res.data);
							if (res.data.code == 1) {
								let ionfo = res.data.data;
								ionfo.isLogin = true;
								this.userInfo = ionfo;
								this.uid = ionfo.id || 0;
								console.log('设置用户信息:', this.userInfo);
								console.log('is_promotion字段:', this.userInfo.is_promotion);
								
								// 缓存用户信息到本地存储
								uni.setStorage({
									key: 'userinfo',
									data: res.data.data
								});
								
								// 获取用户信息成功后，加载视频详情
								this.loadVideoInfo();
							} else {
								console.log('获取用户信息失败:', res.data.msg);
								// 即使获取用户信息失败，也继续加载视频详情
								this.loadVideoInfo();
							}
						},
						fail: (data, code) => {
							console.log('获取用户信息失败:', data);
							// 即使获取用户信息失败，也继续加载视频详情
							this.loadVideoInfo();
						}
					});

					

					// 如果API没有获取到数据，使用本地存储的数据
					this.userInfo = user_info.data;
					this.uid = user_info.data.id || 0;

					return this.userInfo;
				} catch (error) {
					console.error('获取用户信息失败:', error);
					// 即使获取用户信息失败，也继续加载视频详情
					this.loadVideoInfo();
					return null;
				}
			},
			
			// 加载视频详情
			loadVideoInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				
				const token = uni.getStorageSync("userinfo") ? uni.getStorageSync("userinfo").token : '';
				
				uni.request({
					url: this.urls + '/api/video/videoinfo',
					data: {
						page: 1,
						uid: this.uid,
						vid: this.vid,
						mid: this.mid,
						token: token
					},
					success: (res) => {
						uni.hideLoading();
						console.log('Video info response:', res.data.videodata);
						
					
						// 获取第一个视频的详情
						this.videoData = res.data.videodata;
						
						// 更新页面数据
						this.updatePageData();
						
						
						
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('获取视频信息失败:', err);
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},
			
			// 更新页面数据
			updatePageData() {
				if(this.videoData) {
					// 更新代理信息
					this.agentInfo = {
						cover: this.videoData.img || '/static/logo.png',
						title: this.videoData.title || 'เทพบุตรบัญชีแค้น',
						platform: 'FlexTV',
						commissionRatio: 30,
						highestRevenue: 879.25,
						tags: ['โรแมนติก', 'แก้แค้น', 'ละครเมือง', 'มหาเศรษฐี'],
						synopsis: this.videoData.msg || 'มีเทพบุตรที่มีอิทธิพลมากที่สุดในเมือง แต่ซ่อนตัวเป็นลูกเขยเพื่อแก้แค้นอย่างลึกซึ้ง เขาได้ทนทุกข์ทรมานจากการดูถูกของครอบครัวภรรยาที่ไม่รู้จักตัวตนที่แท้จริงของเขา เมื่อตัวตนที่แท้จริงถูกเปิดเผย ทำให้เกิดความวุ่นวายทั่วเมือง และมหาเศรษฐีกลับมา พร้อมที่จะแก้แค้นอย่างพันเท่า'
					};

					console.log(this.agentInfo,this.videoData)
					
					// 更新推广数据
					this.promotionData = {
						totalViews: this.videoData.view || 12580,
						totalClicks: this.videoData.click || 3420,
						totalEarnings: 879.25
					};
				}
			},
			
			goBack() {
				uni.navigateBack();
			},
			switchTab(index) {
				this.activeTab = index;
			},
			downloadLink() {
				// 复制下载链接
				const downloadUrl = this.videoData.box_link || this.videoData.box_link  || `https://example.com/download/${this.vid}`;
				this.copyToClipboard(downloadUrl, '下载链接已复制');
			},
			copyLink() {
				// 复制视频链接或分享链接
				const copyContent = this.videoData.link || this.videoData.share_url || `https://admin.rabbit-show.com/h5/#/pages/client/tuan/detail?vid=${this.vid}&fxpid=0&mid=0`;
				this.copyToClipboard(copyContent, '链接已复制');
			},
			copyPromotionLink() {
				const copyContent = this.videoData.link || this.videoData.share_url || `https://admin.rabbit-show.com/h5/#/pages/client/tuan/detail?vid=${this.vid}&fxpid=0&mid=0`;
				this.copyToClipboard(copyContent, '推广链接已复制');
			},
			
			// 通用复制方法
			copyToClipboard(content, successMessage = '内容已复制') {
				// #ifdef H5
				// H5环境下的复制
				if (navigator.clipboard) {
					navigator.clipboard.writeText(content).then(() => {
						uni.showToast({
							title: successMessage,
							icon: 'success'
						});
					}).catch(() => {
						this.fallbackCopy(content, successMessage);
					});
				} else {
					this.fallbackCopy(content, successMessage);
				}
				// #endif
				
				// #ifdef APP-PLUS || MP-WEIXIN
				// APP和微信小程序环境下的复制
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: successMessage,
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			
			// H5环境下的备用复制方法
			fallbackCopy(text, successMessage = '内容已复制') {
				const textArea = document.createElement('textarea');
				textArea.value = text;
				textArea.style.position = 'fixed';
				textArea.style.left = '-999999px';
				textArea.style.top = '-999999px';
				document.body.appendChild(textArea);
				textArea.focus();
				textArea.select();
				
				try {
					document.execCommand('copy');
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					});
				} catch (err) {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
				
				document.body.removeChild(textArea);
			},
			openDirectly() {
				// 直接打开链接
				const openUrl = `https://admin.rabbit-show.com/h5/#/pages/client/tuan/detail?vid=${this.vid}&fxpid=0&mid=0`;
				
				// #ifdef H5
				// H5环境下直接打开链接
				window.open(openUrl, '_blank');
				uni.showToast({
					title: '链接已打开',
					icon: 'success'
				});
				// #endif
				
				// #ifdef APP-PLUS
				// APP环境下使用系统浏览器打开
				plus.runtime.openURL(openUrl);
				uni.showToast({
					title: '链接已打开',
					icon: 'success'
				});
				// #endif
				
				// #ifdef MP-WEIXIN
				// 微信小程序环境下复制链接
				uni.setClipboardData({
					data: openUrl,
					success: () => {
						uni.showToast({
							title: '链接已复制，请在浏览器中打开',
							icon: 'success'
						});
					}
				});
				// #endif
			},
			startPromotion() {
				uni.navigateTo({
					url: '/pages/client/promotion/create?id=' + this.vid
				});
			},
			screenMirror() {
				uni.showToast({
					title: '启动投屏功能',
					icon: 'success'
				});
			},
			downloadCoverImage() {
				if (!this.videoData.img) {
					uni.showToast({
						title: '封面图片不存在',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '下载中...'
				});
				
				// #ifdef H5
				// H5环境下直接下载
				const link = document.createElement('a');
				link.href = this.videoData.img;
				link.download = `${this.videoData.title || 'cover'}.jpg`;
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				uni.hideLoading();
				uni.showToast({
					title: '下载成功',
					icon: 'success'
				});
				// #endif
				
				// #ifndef H5
				// 小程序环境下使用uni.downloadFile
				uni.downloadFile({
					url: this.videoData.img,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									uni.hideLoading();
									uni.showModal({
										title: '下载成功',
										content: '封面图片已保存到本地相册',
										showCancel: false
									});
								},
								fail: (err) => {
									uni.hideLoading();
									console.error('保存封面图片失败:', err);
									uni.showModal({
										title: '保存失败',
										content: '封面图片保存失败，请检查存储权限',
										showCancel: false
									});
								}
							});
						} else {
							uni.hideLoading();
							uni.showModal({
								title: '下载失败',
								content: '封面图片下载失败，请检查网络连接',
								showCancel: false
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('下载封面图片失败:', err);
						uni.showModal({
							title: '下载失败',
							content: '封面图片下载失败，请检查网络连接',
							showCancel: false
						});
					}
				});
				// #endif
			},
			
			// 联系客服方法
			contactCustomer() {
				uni.showToast({
					title: '请联系客服',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.daili-detail-container {
		background: #000;
		min-height: 100vh;
		color: #fff;
		padding-bottom: 120upx;
		position: relative;
		z-index: 1;
	}

	/* 测试内容 */
	.test-content {
		background: #FF4444;
		padding: 20upx;
		margin: 20upx;
		border-radius: 10upx;
		text-align: center;
	}

	.cover-image-section{
		padding: 0 0 0 20upx;
		width: 25%;
		max-width: 25%;
		position: relative;
	}
	
	.cover-image {
		width: 100%;
		height: 300upx;
		border-radius: 10upx;
	}
	
	.download-cover-btn {
		position: absolute;
		bottom: 10upx;
		right: 10upx;
		background: rgba(0, 0, 0, 0.7);
		padding: 8upx 16upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.download-text {
		color: #fff;
		font-size: 20upx;
		font-weight: bold;
	}

	.test-text {
		display: block;
		font-size: 28upx;
		color: #fff;
		margin-bottom: 10upx;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 30upx;
		padding-top: 60upx;
		background: #111;
		
	}



	.header-left {
		width: 60upx;
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 48upx;
		color: #fff;
		font-weight: bold;
	}

	.header-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		width: 60upx;
	}

	/* 封面图片区域 */
	.cover-section {
		width: 100%;
		margin-bottom: 20upx;
		display: flex;
		gap: 15upx;
		padding-top: 20upx;
	}

	.cover-image {
		width: 100%;
		height: 100%;
		background: #222;
		border-radius: 10upx;
	}

	.cover-overlay {
		position: absolute;
		bottom: 120upx;
		left: 40upx;
		display: flex;
		flex-direction: column;
	}

	.cover-title {
		font-size: 56upx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 10upx;
		text-shadow: 2upx 2upx 4upx rgba(0,0,0,0.8);
	}

	.cover-subtitle {
		font-size: 44upx;
		font-weight: bold;
		color: #fff;
		text-shadow: 2upx 2upx 4upx rgba(0,0,0,0.8);
	}

	.character-profiles {
		position: absolute;
		bottom: 80upx;
		left: 40upx;
		display: flex;
		gap: 15upx;
	}

	.character-avatar {
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
		background: #333;
		border: 3upx solid #fff;
	}

	.download-cover {
		position: absolute;
		bottom: 40upx;
		left: 40upx;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 12upx 24upx;
		border-radius: 20upx;
		font-size: 24upx;
	}

	/* 内容信息区域 */
	.content-info {
		padding: 20upx;
		background: #111;
		border-radius: 16upx;
		border: 1px solid #333;
		margin: 20upx;
	}

	.main-title {
		font-size: 40upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 16upx;
	}

	.platform {
		font-size: 28upx;
		color: #999;
		margin-bottom: 16upx;
	}

	.commission-ratio, .highest-revenue {
		font-size: 28upx;
		color: #fff;
		margin-bottom: 16upx;
	}

	.highlight {
		color: #FF4444;
		font-weight: 600;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16upx;
		margin-top: 20upx;
	}

	.tag {
		background: #333;
		color: #fff;
		padding: 8upx 16upx;
		border-radius: 20upx;
		font-size: 24upx;
	}

	/* 导航标签 */
	.nav-tabs {
		display: flex;
		background: #111;
		margin: 20upx;
		border-radius: 12upx;
		border: 1px solid #333;
		overflow: hidden;
	}

	.nav-tab {
		flex: 1;
		text-align: center;
		padding: 24upx 0;
		font-size: 28upx;
		color: #999;
		transition: all 0.3s;
		position: relative;
	}

	.nav-tab.active {
		color: #fff;
		font-weight: 600;
	}

	.nav-tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60upx;
		height: 4upx;
		background: #FF4444;
		border-radius: 2upx;
	}

	/* 内容区域 */
	.content-section {
		margin: 20upx;
	}

	.synopsis-section, .promotion-section {
		background: #111;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 30upx;
	}

	.section-title {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 24upx;
	}

	.synopsis-text {
		font-size: 28upx;
		color: #fff;
		line-height: 1.6;
		margin-bottom: 30upx;
		text-align: justify;
	}

	.action-links {
		display: flex;
		gap: 30upx;
	}

	.action-link {
		color: #fff;
		font-size: 28upx;
		padding: 16upx 24upx;
		border: 1px solid #333;
		border-radius: 8upx;
		background: #222;
	}

	/* 推广数据 */
	.promotion-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-value {
		font-size: 36upx;
		font-weight: 600;
		color: #FF4444;
		margin-bottom: 8upx;
	}

	.stat-label {
		font-size: 24upx;
		color: #999;
	}

	.promotion-tips {
		border-top: 1px solid #333;
		padding-top: 20upx;
	}

	.tip-title {
		font-size: 28upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 16upx;
	}

	.tip-item {
		font-size: 26upx;
		color: #999;
		margin-bottom: 12upx;
	}

	/* 非代理用户提示 */
	.non-agent-tip {
		background: #222;
		border-radius: 16upx;
		border: 1px solid #333;
		padding: 30upx;
		margin-top: 20upx;
		text-align: center;
	}

	.tip-title {
		font-size: 32upx;
		font-weight: 600;
		color: #FF4444;
		margin-bottom: 16upx;
	}

	.tip-content {
		font-size: 28upx;
		color: #999;
		line-height: 1.6;
	}

	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		gap: 20upx;
		padding: 20upx;
		background: #000;
		border-top: 1px solid #333;
	}

	.action-btn {
		flex: 1;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40upx;
		font-size: 28upx;
		font-weight: 600;
		color: #fff;
	}

	.promote-btn {
		background: #FF4444;
	}

	.screen-btn {
		background: #FF4444;
	}

	.non-agent-btn {
		background: #333;
		color: #999;
	}

	/* 推广变现链接信息样式 */
	.link-info-section {
		margin-bottom: 30upx;
	}

	.link-item {
		background: #222;
		border-radius: 12upx;
		padding: 20upx;
		margin-bottom: 15upx;
		border: 1px solid #333;
	}

	.link-label {
		font-size: 28upx;
		font-weight: 600;
		color: #fff;
		margin-bottom: 10upx;
	}

	.link-content {
		margin-bottom: 15upx;
	}

	.link-text {
		font-size: 28upx;
		color: #999;
		word-break: break-all;
		line-height: 1.4;
	}

	.link-actions {
		display: flex;
		gap: 15upx;
		justify-content: flex-start;
	}

	.link-action-btn {
		background: #FF4444;
		color: #fff;
		padding: 12upx 24upx;
		border-radius: 8upx;
		font-size: 24upx;
		font-weight: 600;
		min-width: 80upx;
		text-align: center;
	}
</style> 